<template>
  <div>这是组合式api</div>
  <div class="task-container">
    <input type="text" v-model="inputTaskValueTextRef" />
    <span>{{inputTaskValueTextRef}}</span> 
  <button @click="addTask()">添加任务</button>
  <button @click="toggleTaskshow()">{{isTaskListShow==true?"隐藏列表":"显示列表"}}</button>
 
  <div v-if="isTaskListShow">
    <li v-for="valueItem in inputTaskValues" :key="valueItem">
       {{ valueItem.text }} <button  @click="deleteTaskItem(valueItem.id)">删除</button>
  </li>
  </div>
</div>
 
 <div class="router-container">
  <input type="text" v-model="routerValue" />
  <button @click="addRouter()">添加路径</button>
  <div>{{ routerValues }}</div>
 </div>
</template>

<script>
import { ref, reactive ,toRef } from 'vue'
function generateGUID() {
    function s4() {
        return Math.floor((1 + Math.random()) * 0x10000)
            .toString(16)
            .substring(1);
    }
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
        s4() + '-' + s4() + s4() + s4();
}

export default { 
  setup() {
    const inputTaskValue = reactive({});
    const inputTaskValueTextRef = toRef(inputTaskValue, 'text');
    const inputTaskValues = reactive([]);
    let isTaskListShow = ref(true);
    const routerValue = ref('');
    const routerValues = ref('');

    const addTask=()=>{
                inputTaskValues.push({id:generateGUID(),text:inputTaskValue.text})
     }
     const toggleTaskshow = ()=>{
          isTaskListShow.value  =!isTaskListShow.value 
      }
     const  deleteTaskItem = (id)=>{
              let indexToRemove = inputTaskValues.findIndex(item => item.id === id);
              if (indexToRemove !== -1) {
                inputTaskValues.splice(indexToRemove, 1);
              }
            }
     const addRouter = ()=>{
                routerValues.value =  routerValues.value + (routerValues.value!=''?"-":"") + routerValue.value
            }

    return {
        inputTaskValueTextRef,
        inputTaskValues,
        isTaskListShow,
        routerValue,
        routerValues,
        addTask,
        toggleTaskshow,
        deleteTaskItem,
        addRouter
      }
  }
    
    
}
</script>

<style>
.router-container{
    margin-top: 50px;
    border-width: 1px; /* 边框宽度为2像素 */
    border-style: solid; /* 边框样式为实线 */
    min-height: 100px;
    padding: 10px;
  }
.task-container{
    border-width: 1px; /* 边框宽度为2像素 */
    border-style: solid; /* 边框样式为实线 */
    min-height: 100px;
    padding: 10px;
  }
</style>